import {
  getComponentProps,
  getComponentEvents,
  getComponentSlots,
  type RenderFormItemContentOptions,
  type RenderFormItemContentParams
} from './common'
import SelectModalComp from '../components/select-modal/index.vue'

const SelectModal = {
  // 项内容模板
  renderItemContent(renderOpts: RenderFormItemContentOptions, params: RenderFormItemContentParams) {
    const { data, field } = params

    // 默认属性
    const defaultProps = {}
    // 需要自定义的事件
    const omitEventsKeys = []

    // 将组件ref实例挂载item的params中
    const componentRef = shallowRef<InstanceType<typeof SelectModalComp>>()
    // @ts-ignore vxe还没有更新类型
    // 防止递归更新
    if (!(params.item.params && params.item.params._firstRender)) {
      // @ts-ignore vxe还没有更新类型
      params.item.params = { ...(params.item.params || {}), _firstRender: true, componentRef }
    }

    return (
      <SelectModalComp
        v-model={data[field]}
        ref={componentRef}
        {...getComponentProps(renderOpts, defaultProps)}
        {...getComponentEvents(renderOpts, params, omitEventsKeys)}
      >
        {{ ...getComponentSlots(renderOpts) }}
      </SelectModalComp>
    )
  }
}

export default { SelectModal }
